<template>
    <div class="warp">
        <div class="row">
			<div class="label mar16">
				抽出条件名称
			</div>
			<el-input
                type="textarea"
                :rows="3"
                placeholder="请输入内容"
                class="long-ipt"
                v-model="wrkClsListData[0].label">
            </el-input>
		</div>

		<el-checkbox>腐食率による検索</el-checkbox>
		<div class="item pb16 border-bottom">
			<div class="label">
				年間腐食率
			</div>
			<el-select
				v-model="wrkClsListData[0].label"
				class="shot-ipt"
				placeholder=" "
			>
				<el-option
					v-for="item in wrkClsListData"
					:key="item.key"
					:label="item.label"
					:value="item.label"
				>
				</el-option>
			</el-select>	
			<el-input class="shot-ipt"></el-input>
			<span  class="w27">mm/y</span>
		</div>

		<el-checkbox>基準値との比較</el-checkbox>
		<div class="item pb16">
			<div class="label">
				測定値
			</div>
			<el-select
				v-model="wrkClsListData[0].label"
				class="shot-ipt"
				placeholder=" "
			>
				<el-option
					v-for="item in wrkClsListData"
					:key="item.key"
					:label="item.label"
					:value="item.label"
				>
				</el-option>
			</el-select>	
			<el-select
				v-model="wrkClsListData[0].label"
				class="shot-ipt"
				placeholder=" "
			>
				<el-option
					v-for="item in wrkClsListData"
					:key="item.key"
					:label="item.label"
					:value="item.label"
				>
				</el-option>
			</el-select>	
			<span>+</span>
			<el-input class="shot-ipt"></el-input>
			<span class="w27">mm</span>
		</div>
		<div class="item pb16 border-bottom">
			<div class="label">
				or
			</div>
			<el-select
				v-model="wrkClsListData[0].label"
				class="shot-ipt"
				placeholder=" "
			>
				<el-option
					v-for="item in wrkClsListData"
					:key="item.key"
					:label="item.label"
					:value="item.label"
				>
				</el-option>
			</el-select>	
			<el-select
				v-model="wrkClsListData[0].label"
				class="shot-ipt"
				placeholder=" "
			>
				<el-option
					v-for="item in wrkClsListData"
					:key="item.key"
					:label="item.label"
					:value="item.label"
				>
				</el-option>
			</el-select>	
			<span>+</span>
			<el-input class="shot-ipt"></el-input>
			<span class="w27">%</span>
		</div>

		<el-checkbox>寿命による検索</el-checkbox>
		<div class="item pb16">
			<div class="label">
				余寿命
			</div>
			<el-select
				v-model="wrkClsListData[0].label"
				class="shot-ipt"
				placeholder=" "
			>
				<el-option
					v-for="item in wrkClsListData"
					:key="item.key"
					:label="item.label"
					:value="item.label"
				>
				</el-option>
			</el-select>	
			<el-input class="shot-ipt"></el-input>
			<span  class="w27">mm/y</span>
		</div>

		<div style="padding-left:5%;font-weight:bold;">余寿命計算ルール</div>
		<el-checkbox  style="padding-left:5%">寿命による検索</el-checkbox>
		<div class="item" style="background:#fff;border:1px solid #d9d9d9">
			<el-checkbox  style="padding-left:16px">長期</el-checkbox>
			<el-checkbox  style="padding-left:16px">短期</el-checkbox>
			<el-checkbox  style="padding-left:16px">最小二乗法</el-checkbox>
		</div>


    </div>
</template>

<script>

			const cityOptions = ['上海', '北京', '广州', '深圳'];

export default {
  name: "tab2",
  data() {
    return {
		checkedCities: ['上海', '北京'],
            cities: cityOptions,
            timeFormat:'',
        wrkClsListData: [
				{
					key: 9,
					label: "Ｍ／Ｈ開放"
				},{
					key: 10,
					label: "開放"
				},{
					key: 11,
					label: "359"
				},
			]
    };
  },
  components: {

  },
  watch: {},
  methods: {
      handleCheckedCitiesChange(value) {
			let checkedCount = value.length;
			this.checkAll = checkedCount === this.cities.length;
			this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
		},
  },
  created() {},
  mounted() {},
  beforeDestroy() {},
  destroyed() {}
};
</script>
<style  lang="scss" scoped>
.warp {
    height: auto !important;
}
.row {
	width: 100%;
	display: flex;
	justify-content: flex-start;
	padding: 8px 0; 
    .label {
		width: 89px;
		min-width: 89px;
		height: 32px;
		display: flex;
		align-items: center;
	}
}

::v-deep .el-checkbox {
	line-height: 45px;
}

.item {
	width: 95%;
	transform: translateX(5%);
	display: flex;
	align-items: center;
	.label {
		width: 91px;
	}
	.shot-ipt {
		width: 120px;
		height: 32px;
		min-width: 120px;
		::v-deep .el-input {
			width: 100%;
		}
		::v-deep .el-input__inner {
			width: 100%;
			height: 32px;
		}
		::v-deep .el-input__inner:focus {
			border: 1px solid #dcdfe6;
		}
		::v-deep .el-input__icon {
			line-height: 32px;
			color: #909399;
		}
		::v-deep .el-input__suffix {
			width: 32px;
			right: 0;
			background: #dee0e3;
		}
	}
	* {
		margin-right: 16px;
	}
}


::v-deep .el-textarea__inner {
    resize: none;
}

.mar10 {
	margin-right: 10px;
}
.mar16 {
	margin-right: 16px;
}
.pb16 {
	padding-bottom: 16px;
}
.border-top {
  border-top: 1px solid #D9D9D9;
}
.border-bottom {
  border-bottom: 1px solid #D9D9D9;
}
.border-left {
  border-left: 1px solid #D9D9D9;
}
.border-right {
  border-right: 1px solid #D9D9D9;
}

.w27 {
	width: 27px;
}
</style>
